<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统LOGO</span>
          </div>
          <div>
            <div class="text-center">
              <LogoConfig :logo="form.logo" @refreshLogo="refreshLogo"/>
              <div class="logo-desc">点击上方图片更换Logo</div>
            </div>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top:30px">
          <div slot="header" class="clearfix">
            <span>登录页面</span>
          </div>
          <div>
            <div class="text-center">
              <LoginPageConfig :loginBg="form.loginBg"
                               :loginBoxLocation="form.loginBoxLocation"
                               @refreshLoginBg="refreshLoginBg"/>
              <div class="logo-desc">点击上方图片登录页面</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>系统信息</span>
          </div>
          <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="系统名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入系统名称" />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item prop="phone">
              <span slot="label">
                优树搭服务地址
                <el-tooltip content="当在部署在存在代理服务器时，可配置优树搭具体访问地址如【http://localhost:8080/Youshuda】，平台默认是部署服务器的IP和端口" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input v-model="form.ysdBaseUrl" placeholder="请输入优树搭服务地址" />
            </el-form-item>
            <el-form-item>
              <span slot="label">
                CRUD最多导出
                <el-tooltip content="CRUD模块在进行记录数据导出时，设置最大导出条数，防止导出数据过多影响系统使用，请合理配置，建议不超过【20000】条记录" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input-number v-model.number.trim="form.sysMaxExportCount" type="number" :min="1" placeholder="请输入数据最多导出条数"/>
              <span> 条记录</span>
            </el-form-item>
            <el-form-item>
              <span slot="label">
                用户登录失效时间
                <el-tooltip content="用户登录后，多长时间会要求重新登，建议不超过【8】小时，保存后重新登录生效" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input-number v-model.number.trim="form.expireTime" type="number" :min="30" placeholder="请输入用户登录失效时间"/>
              <span> 分钟</span>
            </el-form-item>
            <el-form-item label="系统水印">
              <el-radio-group v-model="form.enabledSysWatermark" @change="handleEnabledSysWatermark">
                <el-radio-button label="1">开启</el-radio-button>
                <el-radio-button label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.enabledSysWatermark === '1'">
              <span slot="label">
                系统水印API编码
                <el-tooltip content="通过优树搭获取系统水印的API编码" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input clearable placeholder="请录入优树搭获取系统水印的API编码" v-model="form.sysWatermarkApiCode">
                <el-button slot="append" icon="el-icon-s-tools" @click="gotoSet(form.sysWatermarkApiCode)"></el-button>
              </el-input>
            </el-form-item>

            <el-form-item label="系统描述">
              <el-input type="textarea" :rows="4" v-model="form.remark"/>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" size="mini" @click="submit">保存</el-button>
              <el-button type="danger" size="mini" @click="close">关闭</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LogoConfig from "./LogoConfig";
import LoginPageConfig from "./LoginPageConfig";
import request from '@/utils/request'
import store from "@/store";
import {GotoYsdMixins} from "@/views/youshuda/utils/GotoYsdMixins";

export default {
  name: "SysConfigSet",
  mixins:[GotoYsdMixins],
  components: { LogoConfig,LoginPageConfig },
  data() {
    return {
      form: {},
      oldYsdBaseUrl:'',
      oldSysWatermarkApiCode:'',
      // 表单校验
      rules: {
        name: [
          { required: true, message: "系统名称不能为空", trigger: "blur" }
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getSysInfo();
  },
  methods: {
    getSysInfo(){
      request({
        url: '/system/SysInfo',
        method: 'get'
      }).then(response => {
        if(response && response.data){
          this.form = response.data
          this.oldYsdBaseUrl = this.form['ysdBaseUrl']
          this.oldSysWatermarkApiCode = this.form['sysWatermarkApiCode']
        }
      });
    },
    /** 更新系统图标 **/
    refreshLogo(logo){
      this.form['logo'] = logo
    },
    /** 更新系统图标 **/
    refreshLoginBg(loginBg){
      this.form['loginBg'] = loginBg
    },
    /** 系统水印切换 **/
    handleEnabledSysWatermark(val){
      store.commit('SET_ENABLED_SYS_WATERMARK', val);
    },
    submit(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          request({
            url: '/system/SysInfo',
            method: 'post',
            data: this.form
          }).then(response => {
            this.$modal.msgSuccess("修改成功");
            location.reload();
          });
        }
      });
    },
    close(){
      this.$tab.closePage();
    }
  }
};
</script>

<style scoped>
.logo-desc{
  font-size: 14px;
}
</style>
